<script setup lang="ts">
defineProps<{
  value: string,
  size?: string | number,
  integerSize?: string | number,
}>()
</script>
<template>
  <div class="price">
    <div v-if="Number.isFinite(+value)">
      <span
        :style="{ fontSize: Number.isFinite(size) ? `${size}px` : size }">¥</span>
      <span
        class="price-integer"
        :style="{ fontSize: Number.isFinite(integerSize) ? `${integerSize}px` : integerSize }"
      >{{ value.split('.')[0] }}</span>
      <span>.</span>
      <span
        :style="{ fontSize: Number.isFinite(size) ? `${size}px` : size }"
      >{{ value.split('.')[1] }}</span>
    </div>
    <div v-else>
      <span>--</span>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.price {
  color: var(--color-text-price);
  // line-height: 1;
  font-weight: 600;
  font-size: 24px;
  .price-integer {
    font-size: 32px;
  }
}
</style>